<template>
  <div>
    <el-card class="subject">
      <h2>{{subject.title}}</h2>
      <div>{{subject.description}}</div>
      <el-image :src="subject.pic" class="img-style"></el-image>
      <div v-html="subject.content"></div>
    </el-card>
  </div>
</template>
<script>
import { subjectInfo } from "@/api/subject";
export default {
  
  created() {
    this.getsubject();
  },
  data() {
    return {
      subject: {}
    };
  },
  methods: {
    getsubject() {
      subjectInfo("1").then(response => {
        this.subject = response.data;
      });
    }
  }
};
</script>
<style scoped>
p {
word-wrap: break-word;
font-family: "PingFangSC-Regular";
}
.subject {
  font-size: 16px;
  line-height: 30px;
  color: #333;
  letter-spacing: 0;
  text-align: justify;
  font-family: PingFangSC-Regular;
  -webkit-font-smoothing: antialiased;
}
.img-style {
  border-radius: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
}
/deep/ .wscnph {
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 4px;
}
</style>